<template>
  <view>
    <cm-card :title="title"
      extra="万年历"
      @extra-click="extraClickHandler"
      title-icon="cuIcon-title app-theme-color"
      :is-full="isFull" :is-shadow="isShadow"
      :footer-enabled="true"
      :cm-class="cmClass" :cm-style="cmStyle">
      
      <view class="cm-padding-10 cm-text-center">
        
        <!-- 天尊八字式排版 -->
        <view v-if="mode === 'tianzun'">
          <!-- 上半区，与常规排版的左半区完全同步 -->
          <view>
            <view>{{ date.getYearName() + date.getMonthName() }}</view>
            <view class="cm-margin-top-10">
              <view class="bagua-time-card-day-show">{{ date.day }}</view>
            </view>
            <view class="cm-flex cm-flex-j-center cm-margin-top-10">
              <text class="cm-bold app-theme-color">{{ date.getTime() }}</text>
              <view :style="{ 'width': '8px' }"></view>
              <text>{{ date.getWeekDay() }}</text>
            </view>
            <view class="cm-margin-top-10">{{ '农历' + date.getLunarMonthName() + date.lunarDay }}</view>
            <view class="cm-margin-top-10">{{ date.getTermRange() }}</view>
          </view>
          <!-- 下半区 -->
          <view class="cm-margin-top-10">
            <cm-row height="100px">
              <cm-col v-if="parseInt(ganzhiShow) >= 4">
                <view>刻柱</view>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[4].gan"></bagua-element>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[4].zhi"></bagua-element>
              </cm-col>
              <cm-col v-if="parseInt(ganzhiShow) >= 3">
                <view>时柱</view>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[3].gan"></bagua-element>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[3].zhi"></bagua-element>
              </cm-col>
              <cm-col v-if="parseInt(ganzhiShow) >= 2">
                <view>日柱</view>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[2].gan"></bagua-element>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[2].zhi"></bagua-element>
              </cm-col>
              <cm-col v-if="parseInt(ganzhiShow) >= 1">
                <view>月柱</view>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[1].gan"></bagua-element>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[1].zhi"></bagua-element>
              </cm-col>
              <cm-col v-if="parseInt(ganzhiShow) >= 0">
                <view>年柱</view>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[0].gan"></bagua-element>
                <bagua-element size="24" ele-class="cm-bold" :bagua="date.ganzhi[0].zhi"></bagua-element>
              </cm-col>
            </cm-row>
          </view>
        </view>
        
        <!-- 常规排版 -->
        <view class="cm-flex" v-else>
          <!-- 左半边 -->
          <view class="cm-w-60">
            <view>{{ date.getYearName() + date.getMonthName() }}</view>
            <view class="cm-margin-top-10">
              <view class="bagua-time-card-day-show">{{ date.day }}</view>
            </view>
            <view class="cm-flex cm-flex-j-center cm-margin-top-10">
              <text class="cm-bold app-theme-color">{{ date.getTime() }}</text>
              <view :style="{ 'width': '8px' }"></view>
              <text>{{ date.getWeekDay() }}</text>
            </view>
            <view class="cm-margin-top-10">{{ '农历' + date.getLunarMonthName() + date.lunarDay }}</view>
            <view class="cm-margin-top-10">{{ date.getTermRange() }}</view>
          </view>
          <!-- 右半边 -->
          <view class="cm-w-40 cm-flex cm-flex-col cm-flex-j-around">
            <view v-if="parseInt(ganzhiShow) >= 0">
              <text>年柱：</text>
              <text class="cm-bold app-theme-color">{{ date.ganzhi[0].name }}</text>
            </view>
            <view v-if="parseInt(ganzhiShow) >= 1">
              <text>月柱：</text>
              <text class="cm-bold app-theme-color">{{ date.ganzhi[1].name }}</text>
            </view>
            <view v-if="parseInt(ganzhiShow) >= 2">
              <text>日柱：</text>
              <text class="cm-bold app-theme-color">{{ date.ganzhi[2].name }}</text>
            </view>
            <view v-if="parseInt(ganzhiShow) >= 3">
              <text>时柱：</text>
              <text class="cm-bold app-theme-color">{{ date.ganzhi[3].name }}</text>
            </view>
            <view v-if="parseInt(ganzhiShow) >= 4">
              <text>刻柱：</text>
              <text class="cm-bold app-theme-color">{{ date.ganzhi[4].name }}</text>
            </view>
          </view>
        </view>   
      </view>

      <template v-slot:footer>
        <view class="bagua-time-card-footer">
          <cm-button class="cm-flex-g-1" type="primary" outlined :border="false" radius="none" @click="pickTimeHandler">
            <cm-icon size="16" type="iconfont icon-calendar"></cm-icon>
            <text class="cm-margin-left-3">快速选时</text>          
          </cm-button>
          <view class="bagua-time-card-footer-split"></view>
          <cm-button class="cm-flex-g-1" type="primary" outlined :border="false" radius="none" @click="nowTimeHandler">
            <cm-icon size="16" type="iconfont icon-responsetime"></cm-icon>
            <text class="cm-margin-left-3">当前时间</text>
          </cm-button>
        </view>
      </template>

    </cm-card>
    
    <cm-picker-date-popup ref="timePicker" type="both" exist
      :col-names="['年', '月', '日', '时', '分']" 
      :lunar-start="startYear"
      :lunar-end="endYear"
      :lunar-values="lunarInit"
      :solar-start="startYear + startSolarTail"
      :solar-end="endYear + endSolarTail"
      :solar-values="solarInit"
      @confirm="confirmHandler"
      @switch="switchHandler"></cm-picker-date-popup>
  </view>
</template>

<script src="./baguaTimeCard.js"></script>

<style lang="stylus">
@import './baguaTimeCard.styl'
</style>
